<template>
  <div
    class="originProject preview-form"
    style=" background:rgba(255,255,255,1); padding:20px;"
  >
    <div
      class="comTabs"
      style=" border-style:solid; border-width:1px; border-color:#DCDEE2;"
    >
      <Tabs type="line" size="default" :animated="true">
        <TabPane name="所有订单" label="所有订单">
          <Row style=" padding-left:20px; padding-right:20px;">
            <Col :span="7">
              <div class="comText">
                <div
                  style=" background:rgba(245,245,245,1); padding:10px; border-right-width:1px; border-right-style:solid; border-right-color:#E8E8E8; font-size:14px; font-weight:normal; text-align:center;"
                >
                  宝贝
                </div>
              </div>
            </Col>
            <Col :span="4">
              <div class="comText">
                <div
                  style=" background:rgba(245,245,245,1); padding:10px; border-right-width:1px; border-right-style:solid; border-right-color:#E8E8E8; font-size:14px; text-align:center;"
                >
                  单价
                </div>
              </div>
            </Col>
            <Col :span="4">
              <div class="comText">
                <div
                  style=" background:rgba(245,245,245,1); padding:10px; border-right-width:1px; border-right-style:solid; border-right-color:#E8E8E8; font-size:14px; text-align:center;"
                >
                  商品操作
                </div>
              </div>
            </Col>
            <Col :span="4">
              <div class="comText">
                <div
                  style=" background:rgba(245,245,245,1); padding:10px; border-right-width:1px; border-right-style:solid; border-right-color:#E8E8E8; font-size:14px; text-align:center;"
                >
                  交易状态
                </div>
              </div>
            </Col>
            <Col :span="5">
              <div class="comText">
                <div
                  style=" background:rgba(245,245,245,1); padding:10px; font-size:14px; text-align:center;"
                >
                  交易操作
                </div>
              </div>
            </Col>
          </Row>
          <div class="comCard">
            <Card
              dis-hover
              style=" margin-left:20px; margin-right:20px; margin-bottom:20px; margin-top:10px;"
            >
              <div
                class="comLabel"
                style=" background:#EBF8FF; padding:10px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#E6E6E6; font-weight:bold;"
              >
                <p>
                  &nbsp;2020-3-18 订单号: 1234567890
                </p>

                <div class="btnGroup">
                  <div>
                    <Button
                      size="small"
                      type="info"
                      :ghost="true"
                      shape="circle"
                      icon="ios-chatbubbles"
                      @click="
                        addTableData({
                          formId: '',
                          ajaxUrl:
                            'http://coding.dt-dubai.com:8780/autoCoding/project/addPageData',
                          tableId: '',
                        })
                      "
                    >
                      和我联系
                    </Button>
                  </div>
                </div>
              </div>
              <Row :gutter="10" style=" padding:10px;">
                <Col :span="3">
                  <div class="comAvatar">
                    <div>
                      <Avatar
                        shape="square"
                        size="default"
                        src="https://img.alicdn.com/imgextra/i4/509186410/O1CN01z0oR3H1xDpImUXPTf_!!509186410.jpg_80x80.jpg"
                        icon="ios-person"
                        style=" width:120px; height:120px; "
                      />
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" color:#F2781A; font-weight:bold;">
                      北欧大理石书桌轻奢简约现代台式电脑桌ins网红写字台家用小户型
                      [交易快照]
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" margin-top:10px;">
                      颜色分类：100*45雅士白大理石金腿
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" margin-top:10px;">
                      发货时间：付款后3天内
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div
                      style=" padding:50px; font-size:18px; font-weight:bold; text-align:center;"
                    >
                      ￥486.09
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" margin-top:45px; text-align:center;">
                      退款/退货
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" margin-bottom:50px; text-align:center;">
                      投诉卖家
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" margin-top:30px; text-align:center;">
                      物流运输中
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      订单详情
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      花呗账单
                    </div>
                  </div>
                  <div class="comText">
                    <div
                      style=" color:#F2781A; font-weight:bold; text-align:center;"
                    >
                      查看物流
                    </div>
                  </div>
                </Col>
                <Col :span="5">
                  <div class="comText">
                    <div
                      style=" background:rgba(45,140,240,1); color:#FFFFFF; width:100px; padding:5px; margin-left:auto; margin-right:auto; margin-top:45px; text-align:center; border-radius:4px;"
                    >
                      确认收货
                    </div>
                  </div>
                </Col>
              </Row>
            </Card>
          </div>
          <div class="comCard">
            <Card
              dis-hover
              style=" margin-left:20px; margin-right:20px; margin-bottom:20px;"
            >
              <div
                class="comLabel"
                style=" background:#ECF8FF; padding:10px; font-weight:bold;"
              >
                <p>
                  &nbsp;2020-3-18 订单号: 1234567891
                </p>

                <div class="btnGroup">
                  <div>
                    <Button
                      size="small"
                      type="info"
                      :ghost="true"
                      shape="circle"
                      icon="ios-chatbubbles"
                      @click="
                        addTableData({
                          formId: '',
                          ajaxUrl:
                            'http://coding.dt-dubai.com:8780/autoCoding/project/addPageData',
                          tableId: '',
                        })
                      "
                    >
                      和我联系
                    </Button>
                  </div>
                </div>
              </div>
              <Row :gutter="10" style=" padding:10px;">
                <Col :span="3">
                  <div class="comAvatar">
                    <div>
                      <Avatar
                        shape="square"
                        size="default"
                        src="https://img.alicdn.com/imgextra/i4/2067324401/O1CN01eB5a4f1iNhfhqJNz8_!!0-item_pic.jpg_80x80.jpg"
                        icon="ios-person"
                        style=" width:120px; height:120px; "
                      />
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" color:#F2781A; font-weight:bold;">
                      【品智价】轻奢沙发免洗科技布小户型沙发客厅简约现代北欧布艺转角贵妃乳胶
                      [交易快照]
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" margin-top:10px;">
                      颜色分类：习惯使用装【200只无抽取盒】
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div
                      style=" padding:50px; font-size:18px; font-weight:bold; text-align:center;"
                    >
                      ￥4893.07
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" margin-top:45px; text-align:center;">
                      退款/退货
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      投诉卖家
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" margin-top:30px; text-align:center;">
                      物流运输中
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      订单详情
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      花呗账单
                    </div>
                  </div>
                </Col>
                <Col :span="5">
                  <div class="comText">
                    <div
                      style=" background:rgba(242,120,26,1); color:#FFFFFF; width:100px; padding:5px; margin-left:auto; margin-right:auto; margin-top:45px; text-align:center; border-radius:4px;"
                    >
                      提醒发货
                    </div>
                  </div>
                </Col>
              </Row>
            </Card>
          </div>
          <div class="comCard">
            <Card
              dis-hover
              style=" margin-left:20px; margin-right:20px; margin-bottom:20px;"
            >
              <div
                class="comLabel"
                style=" background:#ECF8FF; padding:10px; font-weight:bold;"
              >
                <p>
                  &nbsp;2020-3-18 订单号: 1234567892
                </p>

                <div class="btnGroup">
                  <div>
                    <Button
                      size="small"
                      type="info"
                      :ghost="true"
                      shape="circle"
                      icon="ios-chatbubbles"
                      @click="
                        addTableData({
                          formId: '',
                          ajaxUrl:
                            'http://coding.dt-dubai.com:8780/autoCoding/project/addPageData',
                          tableId: '',
                        })
                      "
                    >
                      和我联系
                    </Button>
                  </div>
                </div>
              </div>
              <Row :gutter="10" style=" padding:10px;">
                <Col :span="3">
                  <div class="comAvatar">
                    <div>
                      <Avatar
                        shape="square"
                        size="default"
                        src="https://img.alicdn.com/imgextra/i3/470168984/O1CN01xC7d6A2GEiqLG71af_!!0-item_pic.jpg_80x80.jpg"
                        icon="ios-person"
                        style=" width:120px; height:120px; "
                      />
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" color:#F2781A; font-weight:bold;">
                      【38活动价】Haier/海尔
                      BCD-335WDECU1法式多门四门变频风冷家用智能电冰箱 [交易快照]
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" margin-top:10px;">
                      颜色分类：晶典珠光色
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div
                      style=" padding:50px; font-size:18px; font-weight:bold; text-align:center;"
                    >
                      ￥3699.00
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" margin-top:45px; text-align:center;">
                      申请售后
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      投诉卖家
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" margin-top:30px; text-align:center;">
                      交易成功
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      订单详情
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      查看物流
                    </div>
                  </div>
                </Col>
                <Col :span="5">
                  <div class="comText">
                    <div style=" margin-top:45px; text-align:center;">
                      申请开票
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      追加评论
                    </div>
                  </div>
                </Col>
              </Row>
            </Card>
          </div>
        </TabPane>
        <TabPane name="待收货" label="待收货">
          <Row style=" padding-left:20px; padding-right:20px;">
            <Col :span="7">
              <div class="comText">
                <div
                  style=" background:rgba(245,245,245,1); padding:10px; border-right-width:1px; border-right-style:solid; border-right-color:#E8E8E8; font-size:14px; text-align:center;"
                >
                  宝贝
                </div>
              </div>
            </Col>
            <Col :span="4">
              <div class="comText">
                <div
                  style=" background:rgba(245,245,245,1); padding:10px; border-right-width:1px; border-right-style:solid; border-right-color:#E8E8E8; font-size:14px; text-align:center;"
                >
                  单价
                </div>
              </div>
            </Col>
            <Col :span="4">
              <div class="comText">
                <div
                  style=" background:rgba(245,245,245,1); padding:10px; border-right-width:1px; border-right-style:solid; border-right-color:#E8E8E8; font-size:14px; text-align:center;"
                >
                  商品操作
                </div>
              </div>
            </Col>
            <Col :span="4">
              <div class="comText">
                <div
                  style=" background:rgba(245,245,245,1); padding:10px; border-right-width:1px; border-right-style:solid; border-right-color:#E8E8E8; font-size:14px; text-align:center;"
                >
                  交易状态
                </div>
              </div>
            </Col>
            <Col :span="5">
              <div class="comText">
                <div
                  style=" background:rgba(245,245,245,1); padding:10px; font-size:14px; text-align:center;"
                >
                  交易操作
                </div>
              </div>
            </Col>
          </Row>
          <div class="comCard">
            <Card
              dis-hover
              style=" margin-left:20px; margin-right:20px; margin-bottom:20px; margin-top:10px;"
            >
              <div class="comLabel" style=" background:#EBF8FF; padding:10px;">
                <p>
                  &nbsp;2020-3-18 订单号: 1234567890
                </p>

                <div class="btnGroup">
                  <div>
                    <Button
                      size="small"
                      type="info"
                      :ghost="true"
                      shape="circle"
                      icon="ios-chatbubbles"
                      @click="
                        addTableData({
                          formId: '',
                          ajaxUrl:
                            'http://coding.dt-dubai.com:8780/autoCoding/project/addPageData',
                          tableId: '',
                        })
                      "
                    >
                      与我联系
                    </Button>
                  </div>
                </div>
              </div>
              <Row :gutter="10" style=" padding:10px;">
                <Col :span="3">
                  <div class="comAvatar">
                    <div>
                      <Avatar
                        shape="square"
                        size="default"
                        src="https://img.alicdn.com/imgextra/i1/3228113414/O1CN015U1lXd1b5ek9crtcI_!!3228113414.jpg_80x80.jpg"
                        icon="ios-person"
                        style=" width:120px; height:120px; "
                      />
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" font-weight:bold;">
                      厨房水槽过滤网洗菜盆下水道水池洗碗槽地漏提笼排水口垃圾过滤网
                      [交易快照]
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" margin-top:10px;">
                      颜色分类：习惯使用装【200只无抽取盒】
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div
                      style=" padding:50px; font-size:18px; font-weight:bold;"
                    >
                      ￥14.50
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" margin-top:45px; text-align:center;">
                      退款/退货
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      投诉卖家
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" margin-top:30px; text-align:center;">
                      物流运输中
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      订单详情
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      查看物流
                    </div>
                  </div>
                </Col>
                <Col :span="5">
                  <div class="comText">
                    <div
                      style=" background:rgba(45,140,240,1); color:#FFFFFF; width:100px; padding:5px; margin-left:auto; margin-right:auto; margin-top:45px; text-align:center; border-radius:4px;"
                    >
                      确认收货
                    </div>
                  </div>
                </Col>
              </Row>
            </Card>
          </div>
          <div class="comCard">
            <Card
              dis-hover
              style=" margin-left:20px; margin-right:20px; margin-bottom:20px;"
            >
              <div class="comLabel" style=" background:#EBF8FF; padding:10px;">
                <p>
                  &nbsp;2020-3-18 订单号: 1234567890
                </p>

                <div class="btnGroup">
                  <div>
                    <Button
                      size="small"
                      type="info"
                      :ghost="true"
                      shape="circle"
                      icon="ios-chatbubbles"
                      @click="
                        addTableData({
                          formId: '',
                          ajaxUrl:
                            'http://coding.dt-dubai.com:8780/autoCoding/project/addPageData',
                          tableId: '',
                        })
                      "
                    >
                      与我联系
                    </Button>
                  </div>
                </div>
              </div>
              <Row :gutter="10" style=" padding:10px;">
                <Col :span="3">
                  <div class="comAvatar">
                    <div>
                      <Avatar
                        shape="square"
                        size="default"
                        src="https://img.alicdn.com/imgextra/i2/1741393998/O1CN010CgsQz1fP83dbZzye_!!1741393998.jpg_80x80.jpg"
                        icon="ios-person"
                        style=" width:120px; height:120px; "
                      />
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" font-weight:bold;">
                      【38活动价】真空压缩袋收纳袋大号被子加厚家用衣物衣服整理袋棉被抽真空袋子
                      [交易快照]
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" margin-top:10px;">
                      颜色分类：1超大2特大4中号赠电泵尺寸：大号（100*70cm）
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div
                      style=" padding:50px; font-size:18px; font-weight:bold;"
                    >
                      ￥58.90
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" margin-top:45px; text-align:center;">
                      退款/退货
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      投诉卖家
                    </div>
                  </div>
                </Col>
                <Col :span="4">
                  <div class="comText">
                    <div style=" margin-top:30px; text-align:center;">
                      物流运输中
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      订单详情
                    </div>
                  </div>
                  <div class="comText">
                    <div style=" text-align:center;">
                      查看物流
                    </div>
                  </div>
                </Col>
                <Col :span="5">
                  <div class="comText">
                    <div
                      style=" background:rgba(45,140,240,1); color:#FFFFFF; width:100px; padding:5px; margin-left:auto; margin-right:auto; margin-top:45px; text-align:center; border-radius:4px;"
                    >
                      确认收货
                    </div>
                  </div>
                </Col>
              </Row>
            </Card>
          </div>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>
<script>
import selfComponents from "@/components/comm/dtTable/components";
import echarts from "echarts";
import { areaValue, areaData } from "@/libs/common";
import { chartOn, chartOff } from "@/libs/tools";
import area from "@/components/comm/area";

export default {
  components: {
    ...selfComponents,
  },
  data() {
    return {
      pageRecordId: "416",
      adminAddress: "http://test.xundacloud.com:8081/xundacloudDemeAdmin",
      area,
    };
  },
  mounted() {},
  methods: {
    gotoPage(functionPath) {
      this.$router.push({ path: functionPath });
    },
  },
};
</script>
